<template>
  <div class="login_box">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <div class="ball">
        <div>
          <img src="../assets/logo.png" />
        </div>
      </div>
      <div class="form">
        <el-form-item label="用户名" prop="username">
          <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            autocomplete="off"
            @keyup.enter.native="submitForm('ruleForm')"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="medium"
            @click="submitForm('ruleForm')"
            round
          >&nbsp;&nbsp;&nbsp;&nbsp;登 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
        </el-form-item>
      </div>
    </el-form>
    <span v-loading.fullscreen.lock="fullscreenLoading"></span>
  </div>
</template>

<script type="text/javascript">
// import serverIp from "../../requestPort";
import {baseUrl} from '../config/env'
export default {
  data() {
    return {
      fullscreenLoading: false, //登录等待遮罩层
      ruleForm: {
        username: "",
        password: "",
        loading: null
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 5, max: 20, message: "长度在 5 到 20 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    loginClose() {
      setTimeout(() => {
        //关闭等待遮罩层
        this.fullscreenLoading = false;
      }, 1000);
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var times = setTimeout(() => {
            //关闭等待遮罩层
            this.fullscreenLoading = false;
            this.$message.error("网络连接超时，请检查网络连接");
          }, 10000);
          this.fullscreenLoading = true;
          var url = baseUrl+'/admin/login';
          this.$http
            .post(
              url,
              {
                // username: this.ruleForm.username,
                user_name: this.ruleForm.username,
                password: this.ruleForm.password
              },
              { emulateJSON: true, withcredentials: true, credentials: true }
            )
            .then(
              (data) =>{
                console.log(data);
                if (data.body.err === 1) {
                  localStorage.setItem("adminImgPath",data.body.imgpath);
                  document.cookie = "name=" + this.ruleForm.username;
                  clearTimeout(times);
                  this.loginClose();
                  localStorage.setItem("adminName", this.ruleForm.username);
                  this.$router.push("home");
                } else if (data.body.err === 0) {
                  clearTimeout(times);
                  this.loginClose();
                  this.$message.error(data.body.msg);
                } else {
                  clearTimeout(times);
                  this.loginClose();

                  this.$message.error("当前登录异常,请稍后重试");
                }
              },
              function(err) {
                clearTimeout(times);
                this.loginClose();

                this.$message.error("错了哦，请正确输入用户名与密码");
              }
            );
        } else {
          clearTimeout(times);
          this.loginClose();
          this.$message.error("错了哦，请输入正确格式的用户名与密码");
          return false;
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.form {
  width: 400px;
  margin-top: -10%;
  margin-left: -5%;
}
.ball {
  width: 100px;
  height: 100px;

  padding: 15px;
  border: 10px solid white;
  border-radius: 50%;
  background: #eeeeee;
  position: relative;
  top: -30%;
  left: 50%;
  transform: translate(-50%);
  box-shadow: 0 0 10px #ddd;
  img {
    width: 100%;
    height: 100%;
  }
  div {
    width: 90px;
    height: 90px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.demo-ruleForm {
  height: 300px;
  width: 450px;
  position: absolute;
  text-align: center;
  background: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.login_box {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ade1cc;
}
</style>
